<template>
  <dv-border-box-7 id="board-first-charts">
    <div class="first-chart-tittle">设备状态</div>

    <dv-border-box-7 class="device-status">
      <div class="device-status-title">
        设备1
        <div
          :style="`backgroundColor:${Equipment1.color}`"
          class="device-dot-status"
        ></div>
        <div>{{ Equipment1.status }}</div>
      </div>
      <div class="device-status-odd-row">
        稼动率 :
        <div class="device-status-data">{{ Equipment1.JiaDongRate }}%</div>
      </div>
      <div class="device-status-even-row">
        产能效率 :
        <div class="device-status-data">{{ Equipment1.PowerRate }}%</div>
      </div>
      <div class="device-status-odd-row">
        良品率 :
        <div class="device-status-data">{{ Equipment1.GoodRate }}%</div>
      </div>
      <div class="device-status-even-row">
        OEE :
        <div class="device-status-data">{{ Equipment1.OEE }}%</div>
      </div>
    </dv-border-box-7>
    <dv-border-box-7 class="device-status">
      <div class="device-status-title">
        设备2
        <div
          :style="`backgroundColor:${Equipment2.color}`"
          class="device-dot-status"
        ></div>
        <div>{{ Equipment2.status }}</div>
      </div>
      <div class="device-status-odd-row">
        稼动率 :
        <div class="device-status-data">{{ Equipment2.JiaDongRate }}%</div>
      </div>
      <div class="device-status-even-row">
        产能效率 :
        <div class="device-status-data">{{ Equipment2.PowerRate }}%</div>
      </div>
      <div class="device-status-odd-row">
        良品率 :
        <div class="device-status-data">{{ Equipment2.GoodRate }}%</div>
      </div>
      <div class="device-status-even-row">
        OEE :
        <div class="device-status-data">{{ Equipment2.OEE }}%</div>
      </div>
    </dv-border-box-7>
    <dv-border-box-7 class="device-status">
      <div class="device-status-title">
        设备3
        <div
          :style="`backgroundColor:${Equipment2.color}`"
          class="device-dot-status"
        ></div>
        <div>运行中</div>
      </div>
      <div class="device-status-odd-row">
        稼动率 :
        <div class="device-status-data">{{ Equipment2.JiaDongRate }}%</div>
      </div>
      <div class="device-status-even-row">
        产能效率 :
        <div class="device-status-data">{{ Equipment2.PowerRate }}%</div>
      </div>
      <div class="device-status-odd-row">
        良品率 :
        <div class="device-status-data">{{ Equipment2.GoodRate }}%</div>
      </div>
      <div class="device-status-even-row">
        OEE :
        <div class="device-status-data">{{ Equipment2.OEE }}%</div>
      </div>
    </dv-border-box-7>
    <dv-border-box-7 class="device-status"
      ><div class="device-status-title">
        设备4
        <div
          :style="`backgroundColor:${Equipment2.color}`"
          class="device-dot-status"
        ></div>
        <div>运行中</div>
      </div>
      <div class="device-status-odd-row">
        稼动率 :
        <div class="device-status-data">{{ Equipment2.JiaDongRate }}%</div>
      </div>
      <div class="device-status-even-row">
        产能效率 :
        <div class="device-status-data">{{ Equipment2.PowerRate }}%</div>
      </div>
      <div class="device-status-odd-row">
        良品率 :
        <div class="device-status-data">{{ Equipment2.GoodRate }}%</div>
      </div>
      <div class="device-status-even-row">
        OEE :
        <div class="device-status-data">{{ Equipment2.OEE }}%</div>
      </div>
    </dv-border-box-7>
    <dv-border-box-7 class="device-status"
      ><div class="device-status-title">
        设备5
        <div
          :style="`backgroundColor:${Equipment2.color}`"
          class="device-dot-status"
        ></div>
        <div>运行中</div>
      </div>
      <div class="device-status-odd-row">
        稼动率 :
        <div class="device-status-data">{{ Equipment2.JiaDongRate }}%</div>
      </div>
      <div class="device-status-even-row">
        产能效率 :
        <div class="device-status-data">{{ Equipment2.PowerRate }}%</div>
      </div>
      <div class="device-status-odd-row">
        良品率 :
        <div class="device-status-data">{{ Equipment2.GoodRate }}%</div>
      </div>
      <div class="device-status-even-row">
        OEE :
        <div class="device-status-data">{{ Equipment2.OEE }}%</div>
      </div>
    </dv-border-box-7>
    <dv-border-box-7 class="device-status"
      ><div class="device-status-title">
        设备6
        <div
          :style="`backgroundColor:${Equipment2.color}`"
          class="device-dot-status"
        ></div>
        <div>运行中</div>
      </div>
      <div class="device-status-odd-row">
        稼动率 :
        <div class="device-status-data">{{ Equipment2.JiaDongRate }}%</div>
      </div>
      <div class="device-status-even-row">
        产能效率 :
        <div class="device-status-data">{{ Equipment2.PowerRate }}%</div>
      </div>
      <div class="device-status-odd-row">
        良品率 :
        <div class="device-status-data">{{ Equipment2.GoodRate }}%</div>
      </div>
      <div class="device-status-even-row">
        OEE :
        <div class="device-status-data">{{ Equipment2.OEE }}%</div>
      </div>
    </dv-border-box-7>
    <dv-border-box-7 class="device-status"
      ><div class="device-status-title">
        设备7
        <div
          :style="`backgroundColor:${Equipment2.color}`"
          class="device-dot-status"
        ></div>
        <div>运行中</div>
      </div>
      <div class="device-status-odd-row">
        稼动率 :
        <div class="device-status-data">{{ Equipment2.JiaDongRate }}%</div>
      </div>
      <div class="device-status-even-row">
        产能效率 :
        <div class="device-status-data">{{ Equipment2.PowerRate }}%</div>
      </div>
      <div class="device-status-odd-row">
        良品率 :
        <div class="device-status-data">{{ Equipment2.GoodRate }}%</div>
      </div>
      <div class="device-status-even-row">
        OEE :
        <div class="device-status-data">{{ Equipment2.OEE }}%</div>
      </div>
    </dv-border-box-7>
    <dv-border-box-7 class="device-status"
      ><div class="device-status-title">
        设备8
        <div
          :style="`backgroundColor:${Equipment2.color}`"
          class="device-dot-status"
        ></div>
        <div>运行中</div>
      </div>
      <div class="device-status-odd-row">
        稼动率 :
        <div class="device-status-data">{{ Equipment2.JiaDongRate }}%</div>
      </div>
      <div class="device-status-even-row">
        产能效率 :
        <div class="device-status-data">{{ Equipment2.PowerRate }}%</div>
      </div>
      <div class="device-status-odd-row">
        良品率 :
        <div class="device-status-data">{{ Equipment2.GoodRate }}%</div>
      </div>
      <div class="device-status-even-row">
        OEE :
        <div class="device-status-data">{{ Equipment2.OEE }}%</div>
      </div>
    </dv-border-box-7>
  </dv-border-box-7>
</template>

<script>
import Axios from "axios";
import { color } from "echarts";
export default {
  name: "BoardFirstCharts",
  data() {
    return {
      Equipment1: {
        // color: "red",
        // status: "停机",
        // JiaDongRate: 80,
        // PowerRate: 90,
        // GoodRate: 89,
        // OEE: 88,
        color: null,
        status: null,
        JiaDongRate: null,
        PowerRate: null,
        GoodRate: null,
        OEE: null,
      },
      Equipment2: {
        color: "lightgreen",
        status: "运行",
        JiaDongRate: 89,
        PowerRate: 98,
        GoodRate: 89,
        OEE: 88,
      },
      Equipment3: {},
      Equipment4: {},
      Equipment5: {},
      Equipment6: {},
      Equipment7: {},
      Equipment8: {},
    };
  },
  methods: {
    UpdateData() {
      var _this = this;
      var url = this.$baseUrl + "equipment/equipment-status";
      Axios.get(url).then(
        (response) => (
          (_this.Equipment1 = response.data[0]),
          (_this.Equipment2 = response.data[1])
        )
      );
    },
  },
  mounted() {
    const { UpdateData } = this;

    this.UpdateData();
  },
};
</script>

<style lang="less">
#board-first-charts {
  width: 100%;
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
  .first-chart-tittle {
    font-size: 30px;
    display: flex;
    font-weight: bold;
    color: #1778e6;
    justify-content: center;
    align-items: center;
  }
  .device-status {
    width: 23.7%;
    height: 43%;
    display: inline-flex;
    flex-direction: column;
    margin: 10px;
  }
  .device-status-title {
    font-size: 20px;
    display: flex;
    font-weight: bold;
    color: #1778e6;
    justify-content: center;
    align-items: center;
  }
  .device-status-odd-row {
    font-size: 20px;
    display: flex;
    font-weight: bold;
    color: #34d5aa;
    height: 22%;
    background-color: #012546;
    justify-content: space-between;
  }
  .device-status-even-row {
    font-size: 20px;
    display: flex;
    font-weight: bold;
    color: #34d5aa;
    height: 22%;
    background-color: #09192d;
    justify-content: space-between;
  }
  .device-status-data {
    font-size: 25px;
    display: flex;
    font-weight: bold;
    color: #f00;
    justify-content: center;
  }
  .device-dot-status {
    width: 18px;
    height: 18px;
    border-radius: 18px;
    margin-left: 5rem;
  }
}
</style>
